<template>
  <div id="map">

  </div>
</template>

<script setup>
import mapboxgl from "mapbox-gl";
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
import {onMounted, reactive} from "vue";

let map;
onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'

  // init map
  map = new mapboxgl.Map({
    container: 'map', // 地图容器id
    style: 'mapbox://styles/mapboxdevuser520/cls2yp8i700de01r6d3rt8pr5', // 地图样式
    center: {lng: 120, lat: 32.8}, // 地图初始中心
    zoom: 7, // 地图初始缩放级别
    projection: 'globe', // 地图投影为3D
    pitch: 15, // 相对于地图3D视角的角度
    antialias: true, // 坑锯齿效果
    essential: true,
    bearing: 45, // 以度为单位为北逆时针旋转 （方向角
    renderWorldCopies: false, //可理解为loop，在projection: 'globe'时无效
    skipOnboarding: true,//可选择不等待瓦片加载
    attributionControl: false, // 属性控制
  })
  map.addControl(new mapboxgl.AttributionControl({
    customAttribution: "Wangzz's Map @ 2024 Haizhi.inc"
  }))
  // Add a scale control(缩放控制插件) to the map
  map.addControl(new mapboxgl.ScaleControl());
  // Mapbox汉化处理
  map.addControl(new MapboxLanguage({
    defaultLanguage: 'zh-Hans'
  }));
  initEvent();

})

const initEvent = () => {
  map.on('load', (e) => {
    console.log('output-> e', e)
    console.log('output-> e.type::: ', e.type)
    addLine();
  })
  map.on('boxzoomstart', (e) => {
    console.log('event type:', e.type);
  });
  map.on('sourcedata', (e) => {
    if(e.isSourceLoaded) {
      console.log('output-> e', e)
      console.log('output-> 数据源加载完成. 数据类型为: ', e.sourceDataType)
    }
  })
  map.on('click', (e) => {
    console.log('output-> [click event]e:: ', e)
    /**
     * lnglat
     * point: {x, y}
     * target: null
     * type
     * */
  })

  map.on('wheel', (e) => {
    console.log('output-> 【wheel】e.type', e)
    console.log('output-> 【wheel】e.type', e.type)
  })
}

const addLine = () => {
  map.addSource('route', {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      'properties': {},
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [120.483696, 32.833818],
          [120.483482, 32.833174],
          [120.483396, 32.8327],
          [120.483568, 32.832056],
          [120.48404,  32.831141],
          [120.48404,  32.830497],
          [120.483482, 32.82992],
          [120.483568, 32.829548],
          [120.48507,  32.829446],
          [120.4861,   32.828802],
          [120.486958, 32.82931],
          [120.487001, 32.830802],
          [120.487516, 32.831683],
          [120.488031, 32.832158],
          [120.488889, 32.832971],
          [120.489876, 32.832632],
          [120.490434, 32.832937],
          [120.49125,  32.832429],
          [120.491636, 32.832564],
          [120.492237, 32.833378],
          [120.493782, 32.833683]
        ]
      }
    }
  })

  map.addLayer({
    'id': 'route',
    'type': 'line',
    'source': 'route',
    'layout': {
      'line-join': 'round',
      'line-cap': 'round',
    },
    'paint': {
      'line-color': 'red',
      'line-width': 8
    }
  })
}
</script>

<style lang="scss" scoped>
#map {
  height: 100vh;
  width: 100%;
}
</style>
